// 定义变量来存储当前选中的行和列索引
var selectedRow = -1;
var selectedCol = -1;

// 获取浏览器窗口标签元素
var titleElement = document.querySelector("title");

// 在点击矩阵元素时更新选中的行和列索引
$(document).on('click', '#matrix-table td', function () {
    selectedRow = $(this).parent().index();
    selectedCol = $(this).index();
});

function updateBracketsHeight() {
    var matrixTable = document.getElementById('matrix-table');
    var leftBracket = document.getElementById('left-bracket');
    var rightBracket = document.getElementById('right-bracket');

    var tableHeight = matrixTable.offsetHeight; // 获取表格的高度
    leftBracket.style.height = tableHeight + 'px'; // 设置左方括号的高度
    rightBracket.style.height = tableHeight + 'px'; // 设置右方括号的高度
}

$(document).on('keydown', 'table input', function (event) {
    var keyCode = event.keyCode;
    var isShiftPressed = event.shiftKey;

    if (keyCode === 82 && !isShiftPressed) {
        // r键：复制并插入当前选中的行到上方或下方
        event.preventDefault(); // 阻止默认的滚动行为
        copyAndInsertRow(selectedRow);
    } else if (keyCode === 67 && !isShiftPressed) {
        // c键：复制并插入当前选中的列到左侧或右侧
        event.preventDefault();
        copyAndInsertColumn(selectedCol);
    } else if (keyCode === 82 || keyCode === 67 && isShiftPressed) {
        // R键或C键：删除当前选中的行或列
        event.preventDefault();
        deleteRowOrColumn(selectedRow, selectedCol, keyCode);
    } else if (keyCode === 87 || keyCode === 83 || keyCode === 65 || keyCode === 68) {
        // wasd键：互换当前选中行或列与下一行或列的位置
        event.preventDefault();
        swapRowOrColumn(keyCode);
    }

    // 在需要更新方括号高度的时机调用该函数
    updateBracketsHeight();
});

function copyAndInsertRow(selectedRow) {
    if (selectedRow >= 0) {
        var selectedRowElements = $('#matrix-table tr').eq(selectedRow).clone();

        // r键：插入到下方
        $('#matrix-table tr').eq(selectedRow).after(selectedRowElements);

        saveMatrix();
    }
}

function copyAndInsertColumn(selectedCol) {
    if (selectedCol >= 0) {
        $('#matrix-table tr').each(function () {
            var selectedColElement = $(this).find('td').eq(selectedCol).clone();

            // c键：插入到右侧
            $(this).find('td').eq(selectedCol).after(selectedColElement);
        });

        saveMatrix();
    }
}

function deleteRowOrColumn(selectedRow, selectedCol, keyCode) {
    var rowCount = $('#matrix-table tr').length;
    var colCount = $('#matrix-table tr:first td').length;

    if (selectedRow >= 0 && keyCode === 82 && rowCount > 1) {
        // R key: Delete row
        $('#matrix-table tr').eq(selectedRow).remove();
        rowCount--;
        if (selectedRow >= rowCount) {
            selectedRow--;
        }
    } else if (selectedCol >= 0 && keyCode === 67 && colCount > 1) {
        // C key: Delete column
        $('#matrix-table tr').each(function () {
            $(this).find('td').eq(selectedCol).remove();
        });
        colCount--;
        if (selectedCol >= colCount) {
            selectedCol--;
        }
    }

    $('#matrix-table tr').eq(selectedRow).find('td').eq(selectedCol).find('input').focus();

    saveMatrix();
}

function swapRowOrColumn(keyCode) {
    if (keyCode === 87) {
        // w：互换行
        if (selectedRow > 0) {
            var currentRow = $('#matrix-table tr').eq(selectedRow);
            var previousRow = $('#matrix-table tr').eq(selectedRow - 1);
            currentRow.insertBefore(previousRow);

            selectedRow--; // Update selectedRow value after swapping
        } else {
            // 第一行变成最后一行
            var currentRow = $('#matrix-table tr').eq(selectedRow);
            var lastRow = $('#matrix-table tr:last-child');
            currentRow.insertAfter(lastRow);

            selectedRow = $('#matrix-table tr').length - 1; // Update selectedRow value after swapping
        }
    } else if (keyCode === 65) {
        // a：互换列
        if (selectedCol > 0) {
            $('#matrix-table tr').each(function () {
                var currentCell = $(this).find('td').eq(selectedCol);
                var previousCell = $(this).find('td').eq(selectedCol - 1);
                currentCell.insertBefore(previousCell);
            });

            selectedCol--; // Update selectedCol value after swapping
        } else {
            // 第一列变成最后一列
            $('#matrix-table tr').each(function () {
                var currentCell = $(this).find('td').eq(selectedCol);
                var lastCell = $(this).find('td:last-child');
                currentCell.insertAfter(lastCell);
            });

            selectedCol = $('#matrix-table tr:first-child td').length - 1; // Update selectedCol value after swapping
        }
    } else if (keyCode === 83) {
        // s：互换行
        if (selectedRow < $('#matrix-table tr').length - 1) {
            var currentRow = $('#matrix-table tr').eq(selectedRow);
            var nextRow = $('#matrix-table tr').eq(selectedRow + 1);
            currentRow.insertAfter(nextRow);

            selectedRow++; // Update selectedRow value after swapping
        } else {
            // 最后一行变成第一行
            var currentRow = $('#matrix-table tr').eq(selectedRow);
            var firstRow = $('#matrix-table tr:first-child');
            currentRow.insertBefore(firstRow);

            selectedRow = 0; // Update selectedRow value after swapping
        }
    } else if (keyCode === 68) {
        // d：互换列
        if (selectedCol < $('#matrix-table tr:first-child td').length - 1) {
            $('#matrix-table tr').each(function () {
                var currentCell = $(this).find('td').eq(selectedCol);
                var nextCell = $(this).find('td').eq(selectedCol + 1);
                currentCell.insertAfter(nextCell);
            });

            selectedCol++; // Update selectedCol value after swapping
        } else {
            // 最后一列变成第一列
            $('#matrix-table tr').each(function () {
                var currentCell = $(this).find('td').eq(selectedCol);
                var firstCell = $(this).find('td:first-child');
                currentCell.insertBefore(firstCell);
            });

            selectedCol = 0; // Update selectedCol value after swapping
        }
    }

    saveMatrix();
    // Set focus on the newly selected row or column
    $('#matrix-table tr').eq(selectedRow).find('td').eq(selectedCol).find('input').focus();

}

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

// 渲染矩阵
function renderMatrix(matrix, matrixName) {
    var matrixTable = $('#matrix-table');
    matrixTable.empty();

    if (matrix && !('error' in matrix)) {
        // 显示矩阵
        for (var i = 0; i < matrix.length; i++) {
            var row = '<tr>';
            for (var j = 0; j < matrix[i].length; j++) {
                row += '<td><input type="text" value="' + matrix[i][j] + '" /></td>';
            }
            row += '</tr>';
            matrixTable.append(row);
        }
    } else {
        // 无效矩阵，默认显示1x1的零矩阵
        matrixTable.append('<tr><td><input type="text" value="0" /></td></tr>');
    }

    adjustInputSizes();

    $('#matrix-name').text(matrixName); // 更新矩阵名称
    updateBracketsHeight();

    // 添加框选功能
    var isSelecting = false;
    var startRowIndex, startColIndex;
    var selectedInputs = [];

    matrixTable.on('mousedown', 'input', function (event) {
        if (isFirefox) {
            event.preventDefault();
        }
        var clickedInput = this;
        var isInSelectedArea = selectedInputs.some(function (input) {
            return input === clickedInput;
        });

        if (!isInSelectedArea && selectedInputs.length === 0) {
            isSelecting = true;
        } else {
            isSelecting = false;
            selectedInputs.forEach(function (input) {
                $(input).css('border-color', '');
            });
            selectedInputs = [];
        }

        if (isSelecting) {
            startRowIndex = $(this).closest('tr').index();
            startColIndex = $(this).closest('td').index();
        }
        $(this).focus();
    });

    $(document).mousemove(function (event) {
        if (isSelecting) {
            if (isFirefox) {
                event.preventDefault();
            }
            var currentRowIndex = $(event.target).closest('tr').index();
            var currentColIndex = $(event.target).closest('td').index();

            matrixTable.find('input').each(function () {
                var rowIndex = $(this).closest('tr').index();
                var colIndex = $(this).closest('td').index();

                if (
                    rowIndex >= Math.min(startRowIndex, currentRowIndex) &&
                    rowIndex <= Math.max(startRowIndex, currentRowIndex) &&
                    colIndex >= Math.min(startColIndex, currentColIndex) &&
                    colIndex <= Math.max(startColIndex, currentColIndex)
                ) {
                    if (!selectedInputs.includes(this)) {
                        selectedInputs.push(this);
                        $(this).css('border-color', 'green');
                    }
                } else {
                    if (selectedInputs.includes(this)) {
                        selectedInputs.splice(selectedInputs.indexOf(this), 1);
                        $(this).css('border-color', '');
                    }
                }
            });
        }
    });

    $(document).mouseup(function () {
        isSelecting = false;
    });

    // 添加键盘事件监听器
    $('#matrix-table').on('input', 'input', function (event) {
        if (selectedInputs.length > 0) {
            selectedInputs.forEach(function (input) {
                if (input !== event.target) {
                    var value = $(event.target).val();
                    $(input).val(value);
                }
                adjustInputSize(input);
            });
            if (selectedInputs.length > 1) {
                event.stopPropagation();
                saveMatrix();
            }
        }
    });

}

function displayMatrix(name, done) {
    var ast = parseStringToAST(name)

    if (typeof ast === 'string') {
        // 请求单个矩阵
        var matrixName = ast;

        $.ajax({
            url: '/matrix/' + matrixName,
            type: 'GET',
            success: function (matrix) {
                renderMatrix(matrix, matrixName);
                if (done) {
                    done();
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    } else {

        var matrixNames = extractNames(ast)
        var matrices = [];
        var env = {};

        // 请求多个矩阵
        var requests = matrixNames.map(function (matrixName) {
            return $.ajax({
                url: '/matrix/' + matrixName,
                type: 'GET'
            });
        });

        $.when.apply($, requests).done(function () {
            if (matrixNames.length === 1) {
                matrices = [arguments];
                env[matrixNames[0]] = arguments[0];
            } else {
                for (var i = 0; i < arguments.length; i++) {
                    var matrix = arguments[i][0];
                    var nm = matrixNames[i];
                    matrices.push(matrix)
                    env[nm] = matrix;
                }
            }

            // 检查矩阵是否有效
            var invalidMatrixIndex = matrices.findIndex(function (matrix) {
                return 'error' in matrix;
            });

            if (invalidMatrixIndex !== -1) {
                // 存在无效矩阵
                renderMatrix(matrices[invalidMatrixIndex], matrixNames[invalidMatrixIndex]);
            } else {
                // 所有矩阵有效，计算乘积
                var resultMatrix = evaluateExpression(ast, env);
                var resultMatrixName = name.replace(/[^a-zA-Z0-9_]/g, '');
                renderMatrix(resultMatrix, resultMatrixName);
                saveMatrix(resultMatrixName, resultMatrix);
            }
            if (done) {
                done();
            }
        }).fail(function (error) {
            console.error(error);
        });
    }
}

// 保存矩阵数据
function saveMatrix(name) {
    var matrixData = [];
    $('#matrix-table tr').each(function () {
        var row = [];
        $(this).find('input').each(function () {
            row.push($(this).val());
        });
        matrixData.push(row);
    });

    // 设置背景色为淡黄色
    $('#matrix-table').css('background-color', 'lightyellow');

    var resultMatrixName = $('#matrix-name').text().replace('Matrix: ', ''); // 获取当前矩阵名称

    // 设置标签文字
    titleElement.textContent = "TinyLab " + resultMatrixName;

    $.ajax({
        url: '/matrix/' + (name === undefined ? resultMatrixName : name),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(matrixData),
        success: function (data) {
            console.log(data.message);

            // 保存完成后恢复初始背景色
            $('#matrix-table').css('background-color', '#fff');
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText);

            // 设置背景色为淡红色
            $('#matrix-table').css('background-color', 'lightcoral');

        }
    });

}

// 请求并显示矩阵数据
function fetchMatrixData(matrixName, done) {
    if (matrixName === '') {
        matrixName = '_'; // 如果哈希为空，则将 matrixName 设置为下划线
    }

    displayMatrix(matrixName, done);
}
function adjustInputSize(input) {
    var textLength = $(input).val().length;
    var minWidth = 20; // 设置输入框的最小宽度
    var maxWidth = 100; // 设置输入框的最大宽度
    var newWidth = Math.min(Math.max(textLength * 10, minWidth), maxWidth);
    $(input).css('width', newWidth + 'px');
}
function adjustInputSizes() {
    $('#matrix-table input').each(function () {
        adjustInputSize(this)
    });
}
// 页面加载完成后绑定事件
$(document).ready(function () {

    document.getElementById("helpButton").addEventListener("click", function () {
        document.getElementById("helpDialog").style.display = "block";
    });

    var matrixName = decodeURIComponent(window.location.search.slice(1));

    // 设置标签文字
    titleElement.textContent = "TinyLab " + matrixName;

    fetchMatrixData(matrixName, () => {
        // Retrieve and evaluate the code from local storage on page load
        var code = localStorage.getItem("code");
        if (code) {
            $("#codeInput").val(code);
            eval(code);
        }
    });

    // 添加矩阵元素编辑事件监听器
    $(document).on('input', '#matrix-table input', function () {

        adjustInputSize(this);

        saveMatrix();
    });

    $(document).on('click', '#matrix-name', function () {
        var currentName = $(this).text();

        // 创建输入框并设置初始值为当前名称
        var inputField = $('<input type="text" value="' + currentName + '">');

        // 创建确认按钮
        var confirmButton = $('<button>Confirm</button>');

        // 将输入框和确认按钮插入到相应的位置
        $(this).replaceWith(inputField);
        inputField.after(confirmButton);

        confirmButton.on('click', function () {
            var newName = $(this).prev('input').val();

            // 将输入框和确认按钮替换回原始的 matrix-name 元素
            var inputField = $(this).prev('input');
            var matrixName = $('<p id="matrix-name">' + newName + '</p>');
            inputField.replaceWith(matrixName);
            $(this).remove();

            saveMatrix()

        });
    });

    $("#codeButton").click(function (event) {
        $("#codeInput").toggle();
    });

    $("#codeInput").on("input", function () {
        var code = $(this).val();
        localStorage.setItem("code", code);
    });

});
function closeHelpDialog() {
    $("#helpDialog").hide();
}